<script setup lang="ts">
import { ref, computed } from 'vue'
import { usePlayerStore } from '@renderer/stores/player'
import { storeToRefs } from 'pinia'
import ContextMenu from '@renderer/components/ContextMenu.vue'
import CatList from '@renderer/components/CatList.vue'
import CatListItem from '@renderer/components/CatListItem.vue'
import CatImage from '@renderer/components/CatImage.vue'
import Favorite from '@renderer/components/Favorite.vue'
import { formatSeconds } from '@renderer/tools/index'

import type { PlayerData } from '@renderer/stores/player'

defineOptions({ name: 'PlayList' })

const { playerList, playingData } = storeToRefs(usePlayerStore())
const { loadAudio, setPlayerList } = usePlayerStore()
const contextMenuRef = ref<InstanceType<typeof ContextMenu>>()

const nextList = computed(() => {
  const index = playerList.value.findIndex((f) => f.cid === playingData.value?.cid)
  if (index > -1) {
    const list = playerList.value.slice(index + 1, playerList.value.length)
    return list
  }
  return []
})

function doPlay(data: PlayerData) {
  const { bvid, cid } = data
  loadAudio({ bvid, cid })
}

function clearPlayerList() {
  if (playingData.value) {
    setPlayerList([playingData.value])
  }
}

function removePlayerList(data: PlayerData) {
  if (playingData.value?.cid === data.cid && playerList.value.length > 1) {
    const index = playerList.value.findIndex((f) => f.cid === data.cid)
    if (index + 1 >= playerList.value.length) {
      loadAudio(playerList.value[0])
    } else {
      loadAudio(playerList.value[index + 1])
    }
  }
  const list = playerList.value.filter((f) => f.cid !== data.cid)
  setPlayerList(list)
}
</script>

<template>
  <ContextMenu ref="contextMenuRef" v-slot="{ data }">
    <div class="item" @click="removePlayerList(data)">从队列删除</div>
  </ContextMenu>
  <div class="next-tracks">
    <h1>正在播放</h1>
    <CatListItem v-if="playingData" selected>
      <template #avatar>
        <CatImage :src="playingData.cover" :width="80" :height="80" />
      </template>
      <template #title>{{ playingData.title }}</template>
      <template #description>{{ playingData.bvid }}</template>
      <template #default>{{ playingData.author }}</template>
      <template #actions>
        <Favorite :data="playingData" />
      </template>
      <template #suffix>{{ formatSeconds(playingData.duration) }}</template>
    </CatListItem>
    <template v-if="nextList.length">
      <h1>
        <span>即将播放</span>
        <button @click="clearPlayerList">清除队列</button>
      </h1>
      <CatList :data-source="nextList" row-key="cid">
        <template #default="{ item }: { item: PlayerData }">
          <CatListItem
            @dblclick="doPlay(item)"
            @contextmenu.prevent="(e) => contextMenuRef?.open(e, item)"
          >
            <template #avatar>
              <CatImage :src="item.cover" :width="80" :height="80" />
            </template>
            <template #title>{{ item.title }}</template>
            <template #description>{{ item.bvid }}</template>
            <template #default>
              <a href="#">{{ item.author }}</a>
            </template>
            <template #actions>
              <Favorite :data="item" />
            </template>
            <template #suffix>{{ formatSeconds(item.duration) }}</template>
          </CatListItem>
        </template>
      </CatList>
    </template>
  </div>
</template>

<style lang="less" scoped>
h1 {
  margin-top: 36px;
  margin-bottom: 18px;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;

  button {
    color: var(--color-text);
    border-radius: 8px;
    padding: 0 14px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
    opacity: 0.68;
    font-weight: 500;
  }
}

.next-tracks {
  margin-top: -18px;
}
</style>
